<template>
	<view class="order_pay">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'订单支付',color:'#fff'}" />
		<!-- #endif -->
		<view v-if="address == null" class="add_address" @click="goAddress">
			添加地址
			<uni-icons type="plusempty" size="22" style="color: #fff;margin-left: 5px;"></uni-icons>
		</view>
		<view v-else class="have_item" @click="update">
			<view class="top">
				<text>{{address.name}}</text>
				<text>{{address.phone}}</text>
			</view>
			<view class="bottom_address">
				<!-- <uni-icons type="location" size="20" color="#Fff"></uni-icons> -->
				<view class="bottom">{{address.province+ address.city+ address.district + address.detail+address.house_number}}</view>
			</view>
			<view class="remove">
				<!-- <text>添加地址</text> -->
				<uni-icons type="forward" size="20" color="#Fff"></uni-icons>
			</view>
		</view>
		<view class="order_detail">
			<view class="project_container">
				<view class="project_item" v-for="(item,index) in projectList" :key="index">
					<view class="image">
						<image :src="item.cover || item.product_info.cover" mode=""></image>
					</view>
					<view class="right">
						<view class="title">{{item.name || item.product_info.name}}</view>
						<view class="price_time">
							<view class="price">￥<text>{{item.price || item.product_info.price}}</text></view>
							<view class="time">
								<view class="image_box">
									<image src="/static/images/time.png" mode=""></image>
								</view>
								<text v-if="item.product_info">{{item.product_info.duration}}分钟</text>
								<text v-else>{{item.duration}}分钟</text>
							</view>
						</view>
					</view>
					<view class=" fluctuate">
						<uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)"></uni-icons>
						<view class="">{{item.projecNum || item.num}}</view>
						<uni-icons type="plus-filled" size="30" style="color: #00AC50;" @click="changeNum(index,2)"></uni-icons>
					</view>
				</view>
			</view>
			<view class="service_technician">
				<text>服务技师</text>
				<view class="image_container">
					<text class="bold">{{technician.name}}</text>
					<view class="image">
						<image :src="technician.cover" mode=""></image>
					</view>
				</view>
			</view>
			<view class="service_tiem" @click="toggle('bottom')">
				<text>服务时间</text>
				<text class="color">{{showTime}} 
				<uni-icons type="forward" size="15" color="#24d576"></uni-icons></text>
				<uni-popup v-if="flag & have_time" class="popup" ref="popup" type="bottom" :animation="true" >
					<view class="tab_list">
						<view class="tab_list_item" :class="[{'tab_list_active':dateIndex == index }]"  v-for="(item,index) in serviceTime" :key="index" style="background-color: #fff;">
							<view class="top_tab" @click="changeDateIndex(index)">
								{{item.name}} {{item.show_date}}
							</view>
						</view>
					</view>
					<view class="time_list">
						<view class="time_list_item" :class="[{'time_list_active':item.status == 2},{'not_check':item.status == 0}]" v-for="(item,index) in serviceTime[dateIndex].times" :key="index">
							<view class="" @click="changeTimeIndex(index)">
								<text>{{item.time}}</text>
								<view v-if="item.status == 2 || item.status == 0">暂不可约</view>
							</view>
						</view>
					</view>
				</uni-popup>
				<!-- <text>{{orderDetail.workerTime ==''?technician.workTime : orderDetail.workerTime}}</text> -->
			</view>
			<view class="travel_mode">
				<view class="mode">
					<text>出行方式</text>
					<view class="mode_button">
						<view :class="[{mode_active:isActive}]" @click="taxi">滴滴出租</view>	
						<!-- <view v-if="timeFlag"  :class="[{mode_active:!isActive}]" @click="bus">公交地铁</view>	 -->
					</view>
				</view>
				<view class="slogan">
					<text>{{orderDetail.travel_desc}}</text>
				</view>
				<view class="">
					<text>车费</text>
					<text>￥{{orderDetail.fare}}</text>
				</view>
			</view>
			<view class="coupon" @click="goCoupon">
				<text>优惠券</text>
				<view class="" v-if="orderDetail.coupon.coupon_price == 0">请选择</view>
				<view class="" v-else>{{orderDetail.coupon.coupon_price}}</view>
			</view>
			<view class="remark">
				<text>备注</text>
				<input type="text" v-model="orderDetail.remark" placeholder="选填" placeholder-style="color:#999;text-align:right;font-size:12px;">
			</view>
		</view>
		<view class="pay_title">支付方式</view>
		<view class="pay_mode">
			<view class="pay_mode_item" v-for="(item,index) in payModeList" :key="index" @click="changeType(index)">
				<view class="left">
					<view class="image">
						<image :src="item.url" mode=""></image>
					</view>
					<text>{{item.payName}}</text>
				</view>
				<radio-group @change="radioChange">
					<label class="radio">
						<radio  :value="item.value" :checked="index === current" color="#24d576"/>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="submit">
			<view class="all_price">合计：￥<text>{{totalPrice.toFixed(2)}}</text></view>
			<view class="submit_button" @click="payment">立即支付</view>
			<!-- <view class="" v-else>
				<wx-open-subscribe :template="templateIds" id="subscribe-btn" ref="subscribeBtn">
				  <script type="text/wxtag-template" slot="style">
				    <style>
				      .subscribe-btn {
				        color: #fff;
				        background-color: #07c160;
				      }
					  .submit_button{
						width: 162px;  //162
						height: 44px; //44
						line-height: 44px;
						border-radius: 5px;
						background: #24d576;
						color: #fff;
						font-size: 16px;
						text-align: center;
						padding:8px 0;
						border:none;
					  }
				    </style>
				  </script>
				  <script type="text/wxtag-template">
				    <button class="submit_button">
				      立即支付              
				    </button>
				  </script>
				</wx-open-subscribe>
			</view> -->
		</view>
		<fui-bottom-popup :show="show" @close="closePopup">
			<view class="fui-scroll__wrap">
				<view class="top_title">
					<view class="">
						
					</view>
					<view class="fui-title">优惠券</view>
					<view class="fui-icon__close" @tap="closePopup">
						<fui-icon name="close" :size="48"></fui-icon>
					</view>
				</view>
				<scroll-view scroll-y class="fui-scroll__view">
					<view class="have_data_item" @click="useCoupon(index)" v-for="(item,index) in couponList" :key="index">
							<view class="left used_type">
								<view><text>{{item.coupon_price}}</text>元</view>
								<text>现金券X1</text>
							</view>
							<view class="right">
								<view class="condition_box">
									<view class="condition">
										<view class="" v-if="item.coupon_min_price != 0">
											满{{item.coupon_min_price}} 可用
										</view>
										<view class="" v-else>
											无门槛
										</view>
									</view>
									<view class="validTime">有效期至 {{item.end_use_time}}</view>
								</view>
								<view class="button used_type" >
									使用
								</view>
							</view>
					</view>
				</scroll-view>
			</view>
		</fui-bottom-popup>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	// #ifdef H5
	import wx from "weixin-js-sdk"
	// #endif
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				templateIds: [
					'r3ndP4hp5nydwWZN6JpIToHKhSLqJw38bvX-7PnEQ34',
					'euSrQI9z_7YwBCnPQfHuKPJyNAXL56QWdBg8Fvn4Rac',
					'Y8OT2-cfmLmS6k1Q-ee5S04PIebdq7u2mbkdogrsReE'
				],
				current:1,
				payModeList:[
					{
						value:'0',
						url:'/static/images/orders/yue.png',
						payName:'账户余额',
					},
					{
						value:'1',
						url:'/static/images/orders/wx.png',
						payName:'微信支付',
					},
					{
						value:'2',
						url:'/static/images/orders/zhifubao.png',
						payName:'支付宝',
					},
				],
				timeFlag:false,
				technician:'',		//技师信息
				projectList:[],		//项目信息
				orderDetail:{
					allPrice:0,
					workerTime:'',		//服务时间
					coupon:{
						coupon_price:0
					},			//优惠券
					fare:0,   			//车费
					distance:0,			//距离
					remark:'', 			//备注
					travel_desc:"",     //路程描述
				},
				isActive:true,  //出行方式
				orderId:"",//订单id
				serviceTime:[],  //服务时间数据
				workTime:"",     //选中服务时间
				showTime:"请选择",	 //显示服务时间
				dateIndex:0,	 //日期下标
				timeIndex:0,	 //时间下标
				flag:true,	     //弹出层开关
				address:{},  	 //默认地址
				have_time:false, //
				currentAddress:{},		//当前定位坐标
				isWeixin:true,
				show:false,			//优惠券弹出层
				constList:[],		//所有优惠券list
				couponList:[],		//可用优惠券list
				// tabActive:true,
				log_num:1,		//日志  1记录 0不记录
			};
		},
		computed:{
			//合计金额
			totalPrice(){
				var projectPrice = 0
				this.projectList.forEach((item,index)=>{
					console.log(item)
					if(item.num){
						projectPrice += Number(item.product_info.price) * Number(item.num)
					}else{
						projectPrice += Number(item.price) * Number(item.projecNum)
					}
					
				})
				var all = Number(this.orderDetail.fare) + projectPrice - Number(this.orderDetail.coupon.coupon_price)
				console.log(all,'----------------------123123123')
				return all
			}
		},
		onLoad() {
			// #ifdef H5
			var ua = window.navigator.userAgent.toLowerCase(); 
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			    this.isWeixin = true; // 微信中打开
			} else { 
			    this.isWeixin = false; // 普通浏览器中打开
			}
			// #endif
			var orderDetail = JSON.parse(uni.getStorageSync('orderDetail'))
			console.log(orderDetail,'------------------orderdetail')
			var data =orderDetail.data
			this.technician = orderDetail.technician
			this.projectList = orderDetail.project
			this.getCopon()
			
			//确认订单
			this.$http({
				url:'/api/product/order/confirm',
				method:'post',
				data,
				success:result=>{
					if(result.code == 200){
						var resultData = result.data
					    var severTime = `(${resultData.select_date.name}) ${resultData.select_date.time}`
						var storageTime = `${resultData.select_date.date} ${resultData.select_date.time}`
						this.workTime = storageTime
						this.showTime = severTime
						this.address = resultData.address
						let time = resultData.select_date.time.split(':')
						if(7 < Number(time[0]) && Number(time[0]) < 20){
							this.timeFlag = true
						}else{
							this.timeFlag = false
						}
						//获取服务时间
						this.getServerTime()
						// this.getAddress()
					}
				}
			})
			setTimeout(()=>{
				// this.getAddress()
			},2000)
		},
		onShow() {
			console.log(this.address,'--------------------------------------------选中后的地址')
			setTimeout(()=>{
				this.getAddress()
			},1000)
		},
		// onReady() {
		// 	this.getInfo()
		// 	var btn = this.$refs.subscribeBtn;
		// 	btn.addEventListener('success', ({detail}) => {
		// 		console.log('success1', detail);	
		// 		this.paySubmit()
		// 	});
		// 	btn.addEventListener('error', ({detail}) => {
		// 		console.log('fail1', detail);
		// 		// this.paySubmit()
		// 	});
		// },
		onLaunch() {
			setTimeout(()=>{
				// #ifdef H5
				window.location.reload()
				// #endif
				// #ifdef APP-PLUS
				// 页面重载
				const pages = getCurrentPages()
				const curPage = pages[pages.length - 1]
				curPage.onLoad()
				// #endif
			},1500)
		},
		methods:{
			//使用优惠券
			useCoupon(i){
				console.log(this.allPrice,'--------------------123')
				console.log(Number(this.couponList[i].coupon_min_price))
				if(this.allPrice < Number(this.couponList[i].coupon_min_price)){
					let options = {}
					//提示信息						
					options.text = '当前优惠券不可用(未到达使用金额)';
					this.$refs.toast.show(options)
					return false;
				}else{
					this.orderDetail.coupon = this.couponList[i]
					this.closePopup()
				}
			},
			//关闭优惠券弹层
			closePopup(){
				this.show = false;
			},
			//获取优惠券列表
			getCopon(){
				 let  user = JSON.parse(uni.getStorageSync('userInfo'))
				 uni.showLoading({
					 title:'加载中...'
				 })
				this.$http({
					url:`/api/user/coupon/list/0`,
					method:'get',
					success:result=>{
					console.log(result,"getAddressgetAddressgetAddressgetAddressgetAddress")
						if(result.code == 200){
							uni.hideLoading()
							this.constList = JSON.parse(JSON.stringify(result.data))
							this.couponList = this.constList.filter(el=>{
								return el.status == 0
							})
						}
					}
				})
			},
			getInfo() {
				// #ifdef H5
				let url = window.location.href.split("#")[0]
				this.$http({
					url:'/api/wechat/share?url='+url,
					method:'get',
					success:result=>{
						  console.log(result,'-------------------------分享')
						  let data = result.data.info;
						  this.templateIds = data.template_id;
						  let that = this;
						 wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							appId: data.appId, // 必填，公众号的唯一标识
							timestamp: data.timestamp, // 必填，生成签名的时间戳<?= $data['timestamp']?>
							nonceStr: data.nonceStr, // 必填，生成签名的随机串<?= $data['noncestr']?>
							signature: (data.signature).toLowerCase(), // 必填，签名<?= $data['signature']?>
							jsApiList:[] ,// 这里先声明我们要用到打开地图的JS接口
							openTagList:['wx-open-subscribe']
						 });
						 // config 准备好了那么就开始操作了，
						 wx.ready(() => {
						 // wx-open-subscribe 原生绑定点击事件
							console.log('注册成功')
							that.$forceUpdate()
						 })
					}
				})
				// #endif
				
			},
			//服务时间弹出层
			toggle() {
				this.flag= true
			    this.$refs.popup.open();
			},
			//选中日期
			changeDateIndex(i){
				this.dateIndex = i
			},
			//选中时间
			changeTimeIndex(i){
				let time = this.serviceTime[this.dateIndex].times[i].time.split(':')
				if(7 < Number(time[0]) && Number(time[0]) < 20){
					this.timeFlag = true
					// this.isActive = false
				}else{
					this.timeFlag = false
					this.isActive = true
				}
				this.timeIndex = i
				// this.$refs.popup.close();
				console.log(i)
				if(this.serviceTime[this.dateIndex].times[this.timeIndex].status == 2){
					uni.showToast({
						title:'该时间已被预约,请预约其他时间',
						icon:"none"
					})
					return false;
				}
				if(this.serviceTime[this.dateIndex].times[this.timeIndex].status == 0){
					uni.showToast({
						title:'该时间暂不可约,请预约其他时间',
						icon:"none"
					})
					return false;
				}
				this.flag = false
				this.workTime =`${this.serviceTime[this.dateIndex].date} ${this.serviceTime[this.dateIndex].times[this.timeIndex].time}`
				this.showTime =`(${this.serviceTime[this.dateIndex].name}) ${this.serviceTime[this.dateIndex].times[this.timeIndex].time}`
				setTimeout(()=>{
					this.computedPrice()
				},100)
			},	
			//选择优惠券
			goCoupon(){
				this.show = true;
				this.allPrice = this.totalPrice + Number(this.orderDetail.coupon.coupon_price || 0)
				// uni.navigateTo({
				// 	url:'/pages/my/coupon/coupon?type=orderpay&orderPrice='+this.allPrice
				// })
			},
			//支付确认
			payment(){
				if(this.current == 0){
					uni.showModal({
						title:'提示',
						content:'请确认支付',
						success: (res) => {
							if(res.confirm){
								this.paySubmit()
							}
						}
					})
				}else{
					uni.showLoading({
						title:'正在支付...'
					})
					this.paySubmit()
				}
			},
			//支付
			paySubmit(){
				if(this.showTime == '请选择'){
					uni.showToast({
						title:'请选择服务时间',
						icon:"none"
					})
					return false;
				}
				if(this.address == null){
					uni.showToast({
						title:'请添加地址信息',
						icon:"none"
					})
					return false;
				}
				let products = [];
				this.projectList.forEach((item,index)=>{
					products.push({
						product_id:item.product_id||item.id,
						num:item.num||item.projecNum
					})
				});
				let channel_id = uni.getStorageSync('channel_id')
				let pay_type = ''
				if(this.current == 0){
					pay_type = 'yue'
				}else if(this.current == 1){
					pay_type = 'wxpay'
				}else{
					pay_type = 'alipay'
				}
				let data = 	{
					products, 	//服务列表
					technician_id: this.technician.id, //技师ID
					address_id: this.address.id?this.address.id:'', //收货地址ID
					coupon_id:this.orderDetail.coupon.coupon_id?this.orderDetail.coupon.coupon_id:'', //优惠券ID
					travel_type:this.isActive?1:2, //出行方式
					service_time: this.workTime, //服务时间
					pay_type:pay_type, //支付方式  weixin   微信    yue   余额
					user_remark:this.orderDetail.remark, //订单备注  （注意 不是购物车备注）
					channel_id:channel_id,
					from:this.$from(),
				}
				console.log(this.$from(),'------------------------------------------this.$from()')
				//创建订单
				this.$http({
					url:'/api/v2/product/order/create',
					method:'post',
					data:data,
					success:result=>{
						console.log(result,'------------------创建订单') 
						
						// return false; 
						if(result.code == 200){
							//创建订单成功，清除订单信息缓存
							uni.removeStorageSync('orderDetail')
							this.pay(result.data.info.order_no,result.data.info.attach,pay_type)
						}
					}
				})
			},
			pay(order_no,attach,pay_type){
				this.$http({
					url:'/api/v2/pay_order',
					method:'post',
					data:{
						order_no,
						attach,
						pay_type,
						from:this.$from()
					},
					success:(result)=>{
						if(result.code == 200){
							if(result.data.info.js_config){ 
								let data = result.data.info.js_config
								// #ifdef H5
								wx.config({
									debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
									appId:data.appId, // 必填，公众号的唯一标识
									timestamp:data.timestamp , // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
									nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
									signType:data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
									jsApiList: ['invoke'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
								});
								wx.invoke(
									'getBrandWCPayRequest', {
										"appId": data.appId, //公众号ID，由商户传入     
										"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数     
										"nonceStr": data.nonceStr, //随机串     
										"package": data.package,
										"signType": data.signType, //微信签名方式：     
										"paySign": data.paySign, //微信签名 
									}
								)
								// #endif
							}else if(result.data.info.scheme_url){
								let url = result.data.info.scheme_url;
								// #ifdef H5
								if (uni.getSystemInfoSync().platform =='android') { //android终端
									window.open(url);
								} else if (uni.getSystemInfoSync().platform == "ios") { //ios终端
									window.location.href = url;
								}
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.openURL(encodeURI(url), err => {
									console.log(err)
								})
								// #endif
							}else{
								uni.showToast({
									title:'支付成功',
									// icon:"none"
								})
								setTimeout(()=>{
									uni.reLaunch({
										url:'/pages/orders/index'
									})
								},1500)
							}
						}else{
							uni.showToast({
								title:result.msg,
								icon:"none"
							})
							return false;
						}
					}
				})
				uni.hideLoading()
			},
			changeType(index){
				this.current = index
			},
			//支付方式单选
			radioChange(e){
				this.payModeList.forEach((item,index)=>{
					if(e.detail.value == item.value){
						this.current = index
					}
				})
			},
			//增减商品数量
			changeNum(index,i){
				if(i == 1){
					if(this.projectList[index].num){
						if(this.projectList[index].num > 1){
							this.projectList[index].num--
						}else{
							if(this.projectList.length == 1){
								this.projectList[index].num = 1
							}else{
								this.projectList.splice(index,1)
							}
						}
					}else{
						if(this.projectList[index].projecNum > 1){
							this.projectList[index].projecNum--
						}else{
							this.projectList[index].projecNum = 1
						}
					}
				}else{
					if(this.projectList[index].num){
						this.projectList[index].num++
					}else{
						this.projectList[index].projecNum++
					}
				}
			},
			//添加地址
			goAddress(){
				uni.navigateTo({
					url:'/pages/my/myAddress/addAddress?type=pay_add'
				})
			},
			
			//出租车
			taxi(){
				uni.showLoading({
					title:'请稍候..'
				})
				this.isActive = true;
				setTimeout(()=>{
					this.computedPrice()
				},500)
			},
			//公交车
			bus(){
				uni.showLoading({
					title:'请稍候..'
				})
				this.isActive = false;
				this.orderDetail.fare = 0
				setTimeout(()=>{
					this.computedPrice()
				},500)
			},
			//获取服务时间
			getServerTime(){
				this.$http({
					url:`/api/product/order/service_time/${this.technician.id}`,
					method:'get',
					success:result=>{
						console.log(result,'-----------------------服务时间')
						if(result.code == 200){
							this.serviceTime = result.data.list
							this.have_time = true
						}
					}
				})
			},
			//获取默认地址
			getAddress(){
				console.log('获取默认地址')
				let userInfo = uni.getStorageSync('userInfo')
				this.$http({
					url:'/api/address/list',
					method:'get',
					success:result=>{
						if(result.code == 200){
							let data = result.data.list
							if(!this.address){
								this.address = data[0]
							}
							this.computedPrice()
							console.log(this.address,'-----------------------------this.address')
						}
					}
				})
			},
			//修改地址
			update(){
				uni.navigateTo({
					url:'/pages/my/myAddress/myAddress?is_change=1'
				}) 
			},
			//计算订单金额
			computedPrice(){
				let products = [];
				this.projectList.forEach((item,index)=>{
					products.push({
						product_id:item.product_id || item.id ,
						num:item.num||item.projecNum,
					})
				});
				let data = {
					products,
					technician_id:this.technician.id,
					address_id: this.address?this.address.id:'', 
					coupon_id: this.orderDetail.coupon.coupon_id?this.orderDetail.coupon.coupon_id:'',
					travel_type: this.isActive?1:2,
					service_time:this.workTime ,
					latitude:this.currentAddress.latitude,
					longitude:this.currentAddress.longitude,
					log:this.log_num,
				}
				console.log(data,'-----------------------data')
				this.$http({
					url:'/api/product/order/compute',
					method:'post',
					data:data,
					success:result=>{
						uni.hideLoading()
						if(result.code == 200){
							console.log(result.data,'------------------result计算订单金额')
							let object = result.data
							this.orderDetail.coupon.coupon_price = object.coupon_price
							this.orderDetail.fare = object.travel_price
							this.orderDetail.travel_desc = object.travel_desc
							this.orderDetail.allPrice = object.pay_price
							this.log_num = 0;
							// if(result.data.deviation == 1){ 			//暂时屏蔽
							// 	uni.showModal({
							// 		title:'温馨提示',
							// 		content:'当前服务地址距您所在位置偏差较大，建议您确认地址是否准确',
							// 		cancelText:'重新选择',
							// 		confirmText:'继续',
							// 		success: (res) => {
							// 			if(res.cancel){
							// 				uni.navigateTo({
							// 					url:'/pages/my/myAddress/myAddress?is_change=1'
							// 				}) 
							// 			}
							// 		}
							// 	})
							// }
						}
					}
				})
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.order_pay{
		width: 100%;
		height: 100%;
		background-color: #F6F6F6;
		overflow-y: auto;
		.add_address{
			height: 44px;
			line-height: 44px;
			margin: 15px 9px;
			background-color: #24D576;
			border-radius: 18px;
			color: #fff;
			font-size: 22px;
			font-weight: bold;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.have_item{
			margin: 15px 12px;
			background-color: #24D576;
			color: #fff;
			border-radius: 8px;
			box-shadow: 0 5px 8px rgba(0, 0, 0, 0.06);
			position: relative;
			>view{
				padding: 10px 15px;
			}
			.top{
				display: flex;
				align-items:baseline;
				padding-bottom: 0;
				>text{
					margin-right: 10px;
					font-size: 17px;
				}
				text:last-child{
					font-size: 13px;
				}
			}
			.bottom_address{
				display: flex;
				width: 75%;
				padding: 10px 15px;
				padding-top: 0;
			}
			.bottom{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				
			}
			.remove{
				position: absolute;
				bottom: 20%;
				right: -10px;
				color: #fff;
				display: flex;
				align-items: center;
			}
		}
		.order_detail{
			background-color: #fff;
			margin: 25px 12px;
			border-radius: 8px;
			>view:last-child{
				border: none;
			}
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin:0 10px;
				height: 35px;
				
			}
			.service_tiem{
				.color{
					color: #24d576;
					display: flex;
					align-items: center;
				}
				.popup{
					width: 100%;
					.tab_list{
						display: flex;
						font-size: 18px;
						color: #9F9F9F;
						font-weight: bold;
						.tab_list_item{
							flex: 1;
							text-align: center;
							height: 50px;
							line-height: 50px;
							border-bottom: 1px solid #eee;
							box-sizing: border-box;
							.top_tab{
								font-size: 14px;
								font-weight: 400; 
							}
						}
					}
					.time_list{
						display: flex;
						flex-wrap: wrap;
						max-height: 300px;
						overflow-y: auto;
						background-color: #fff;
						align-items: center;
						padding: 5px 10px;
						.time_list_item{
							width: 22%;
							margin:5px;
							text-align: center;
							border-radius: 8px;
							padding: 10px 0;
							height: 42px;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							background-color: #4cd2ad;
							color: #fff;
							>view{
								width: 100%;
								>view{
									font-size: 12px;
								}
							}
						}
					}
				}
			}
			.project_container{
				height: auto;
				padding: 10px 0;
				flex-direction: column;
				.project_item{
					width: 100%;
					display: flex;
					align-items: center;
					margin: 5px 0;
					.image{
						width: 75px;
						height: 75px;
						margin-right: 15px;
						>image{
							width: 100%;
							height: 100%;
							border-radius: 6px;
						}
					}
					.right{
						flex: 1;
						.title{
							font-weight: 500;
							font-size: 16px;
							color: #2e2e2e;
						}
						.price_time{
							display: flex;
							align-items: center;
							margin-top: 20px;
							.price{
								font-size: 12px;
								font-weight: bold;
								color: #fb2e2e;
								>text{
									font-size: 20px;
								}
							}
							.time{
								display: flex;
								align-items: center;
								height: 12px;
								line-height: 12px;
								margin-left: 12px;
								.image_box{
									width: 12px;
									height: 12px;
									>image{
										width: 100%;
										height: 100%;
									}
								}
								>text{
									font-weight: 500;
									font-size: 12px;
									color: #7b7b7b;
									margin-left: 3px;
								}
							}
						}
					}
					.fluctuate{
						width: 75px;
						display: flex;
						align-items: center;
						view{
							margin: 0 7px;
						}
					}
				}
			}
			.service_technician{
				border-top: 1px solid #E1E1E1;
				padding: 5px 0;
				.image_container{
					display: flex;
					align-items: center;
					.image{
						width: 30px;
						height: 30px;
						>image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.bold{
						font-weight: bold;
						margin-right: 10px;
					}
				}
				
			}
			.travel_mode{
				display: block;
				height: auto;
				padding: 5px 0;
				border-top: 1px solid #E1E1E1;
				>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.mode{
					display: flex;
					justify-content: space-between;
					.mode_button{
						display: flex;
						>view{
							margin: 0 5px;
							color: #000;
							border: 1px solid #000;
							font-size: 14px;
							padding: 4px 10px;
							border-radius: 8px;
						}
					}
				}
				.slogan{
					>text{
						font-size: 12px;
						color: #666;
						margin: 5px 0;
					}
				}
				.remark{
					
				}
			}
			.coupon{
				border-top: 1px solid #E1E1E1;
				height: 30px;
				line-height: 30px;
				font-size:12px;
				color: #666;
				margin-top: 5px;
			}
			.remark{
				height: 30px;
				line-height: 30px;
				font-size:12px;
				color: #666;
				input{
					font-size: 12px;
				}
			}
		
		}
		.pay_title{
			margin: 0 12px;
			font-size: 14px;
			color: #707070;
		}
		.pay_mode{
			// height: 150px;
			padding: 20upx 0;
			margin: 15px 12px;
			background-color: #fff;
			display: flex;
			justify-content: space-around;
			flex-direction: column; 
			margin-bottom:90px;
			border-radius: 8px;
			.pay_mode_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 5px 10px;
				margin: 10upx 0;
				.left{
					display: flex;
					align-items: center;
					.image{
						width: 20px;
						height: 20px;
						margin-right: 10px;
						>image{
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
			}
		}
		.submit{
			width: 100%;
			height: 77px;
			background-color: #fff;
			padding: 0 15px;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			margin-bottom: var(--window-bottom);
			display: flex;
			justify-content: space-between;
			align-items: center;
			>view{
				margin:0 10px ;
			}
			.all_price{
				font-size:14px;
				// font-weight: bold;
				color: #fb3535;
				text{
					font-size: 18px;
					font-weight: bold;
				}
			}
			.submit_button{
				width: 270upx;  //162
				height: 74upx; //44
				line-height: 74upx;
				border-radius: 10upx;
				background: #24d576;
				color: #fff;
				font-size: 28upx;
				text-align: center;
			}
		}
	}
	.tab_list_active{
		color: #2E2E2E;
	}
	.time_list_active{
		background-color: skyblue !important;
		color: #fff;
	}
	.not_check{
		background-color: #9F9F9F !important;
		color: #fff;
	}
	.mode_active{
		background-color: #24d576 !important;
		color: #fff !important;
		border: 1px solid #24d576 !important;
	}
	/deep/ .uni-input-input{
			text-align: right;
		}
	/deep/ uni-radio .uni-radio-input{
		width: 15px;
		height: 15px;
	}
	.drawer_image{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		>image{
			width: 100%;
		}
	}
	/deep/.fui-drawer__popup{
		width: 100% !important;
	}
	.fui-scroll__wrap{
		width: 100%;
		// padding-bottom: 30rpx;
		height: 900upx;
		padding-bottom: 50upx;
		.top_title{
			padding: 20upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.fui-scroll__view{
			width: 100%;
			height: 1100upx;
			.have_data_item{
				margin: 10px 15px;
				height: 125rpx;
				display: flex;
				border-radius: 11px;
				overflow: hidden;
				.left{
					width: 100px;
					background-color: #AFAFAF;
					color: #fff;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: center;
					// border-radius: 11px 0 0 11px;
					>view{
						>text{
							font-size: 25px;
							margin-right: 4px; 
							font-weight: bold;
						}
					}
					text{
						font-size: 12px;
						// font-weight: bold;
					}
				}
				.right{
					flex: 1;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.condition_box{
						flex: 1;
						// padding-left: 10px;
						.condition{
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 20px;
							font-weight: bold;
							margin: 10px;
						}
						.validTime{
							font-size: 12px;
							font-weight: 500;
							margin: 10px;
						}
					}
					.button{
						width: 30px;
						text-align: center;
						padding: 5px;
						box-sizing: border-box;
						color: #fff;
						font-size: 12px;
						border-radius: 14px;
						background-color: #AFAFAF;
						margin-right: 5px;
					}
				}
			}
		}
		.used_type{
			background-color:#3CE88C !important;
		}
		.active{
			color: #000;
			border-bottom: 5px solid #3CE688;
		}
	}
</style>
